import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Drawer, Card, Alert, Tooltip, Modal, message, Popconfirm, Radio } from 'antd';
import AutoTable from '@/components/AutoTable';
import { stopsettle, companydetail, company } from '@/services/business';
import { connect, history } from 'umi';
import * as columnsconfig from './columnsconfig';
import moment from 'moment';
// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input

function UserSalary(props) {
  const [iftype, ciftype] = useState({
      visible: false,
    }),
    [curkey, setcur] = useState('1');

  let actionRef = useRef(),
    ChildRef = null,
    actionRefs = useRef(),
    ChildRefs = null;
  function reload() {
    actionRef?.current?.reload();
    actionRefs?.current?.reload();
    ChildRef?.onRefresh();
    ChildRefs?.onRefresh();
  }

  const columns = [
    {
      title: '员工名称',
      dataIndex: 'user_name',
      key: 'user_name',
      search: false,
    },
    {
      title: '月份',
      dataIndex: 'yearmonth',
      key: 'yearmonth',
      valueType: 'dateMonth',
      search: false,
      initialValue: moment().format('YYYY-MM'),
      render: (_, row) => {
        return <span>{row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)}</span>;
      },
    },
    {
      title: '总薪水',
      dataIndex: 'amount',
      key: 'amount',
      search: false,
    },
    {
      title: '新开户数',
      dataIndex: 'open_account_num',
      key: 'open_account_num',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 开户列表`,
                type: 'open_account_num',
                id: row.id,
              });
            }}
          >
            {row.open_account_num}
          </a>
        );
      },
    },
    {
      title: <span title="新开户收单金额">新开户收单金额</span>,
      dataIndex: 'open_account_amount',
      key: 'open_account_amount',
      search: false,
    },
    {
      title: <span title="促单开户数量">促单开户数量</span>,
      dataIndex: 'open_account_promoter_num',
      key: 'open_account_promoter_num',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 促单开户列表`,
                type: 'open_account_promoter_num',
                id: row.id,
              });
            }}
          >
            {row.open_account_promoter_num}
          </a>
        );
      },
    },
    {
      title: <span title="促单开户奖励">促单开户奖励</span>,
      dataIndex: 'open_account_promoter_reward',
      key: 'open_account_promoter_reward',
      search: false,
    },
    {
      title: <span title="续单收单总金额">续单收单总金额</span>,
      dataIndex: 'renewal_order_amount',
      key: 'renewal_order_amount',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 续单列表`,
                type: 'renewal_order_amount',
                id: row.id,
              });
            }}
          >
            {row.renewal_order_amount}
          </a>
        );
      },
    },
    {
      title: <span title="开户提成金额">开户提成金额</span>,
      dataIndex: 'open_account_take',
      key: 'open_account_take',
      search: false,
    },
    {
      title: <span title="收单提成金额">收单提成金额</span>,
      dataIndex: 'payment_take',
      key: 'payment_take',
      search: false,
    },
    {
      title: <span title="浮动底薪金额">浮动底薪金额</span>,
      dataIndex: 'float_take',
      key: 'float_take',
      search: false,
    },
    {
      title: '其他业务(接单)',
      dataIndex: 'other_receiver_reward',
      key: 'other_receiver_reward',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 其他业务(接单)列表`,
                type: 'other_receiver_reward',
                id: row.id,
              });
            }}
          >
            {row.other_receiver_reward}
          </a>
        );
      },
    },
    {
      title: '其他业务(协同)',
      dataIndex: 'other_coordination_reward',
      key: 'other_coordination_reward',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 其他业务(协同)列表`,
                type: 'other_coordination_reward',
                id: row.id,
              });
            }}
          >
            {row.other_coordination_reward}
          </a>
        );
      },
    },
    {
      title: <span title="其他业务(辅助协同)">其他业务(辅助协同)</span>,
      dataIndex: 'other_auxiliary_coordination_reward',
      key: 'other_auxiliary_coordination_reward',
      search: false,
      render: (_, row) => {
        return (
          <a
            onClick={() => {
              ciftype({
                ...iftype,
                visible: true,
                title: `${row.user_name} ${
                  row.year + '-' + (row.month < 10 ? '0' + row.month : row.month)
                } 其他业务(辅助协同)列表`,
                type: 'other_auxiliary_coordination_reward',
                id: row.id,
              });
            }}
          >
            {row.other_auxiliary_coordination_reward}
          </a>
        );
      },
    },
    {
      title: '代账提成',
      dataIndex: 'voucher_account_take',
      key: 'voucher_account_take',
      search: false,
    },
    {
      title: '复核提成',
      dataIndex: 'voucher_review_take',
      key: 'voucher_review_take',
      search: false,
    },
  ];

  let tableprops = {
    path: columnsconfig.pathobj[iftype.type],
    columns: columnsconfig[iftype.type],
    extraparams: { id: iftype.id },
  };

  return (
    <div className="pgcontainer">
      <Card
        title={props.route.name}
        tabList={[
          {
            key: '1',
            tab: '当月',
          },
          {
            key: '2',
            tab: '历史',
          },
        ]}
        onTabChange={(key) => {
          setcur(key);
        }}
      >
        <AutoTable
          withCard={false}
          bordered={false}
          columns={columns}
          actionRef={actionRef}
          onRef={(node) => (ChildRef = node)}
          extraparams={{ is_current_month: curkey == '1' }}
          path={'/wbn-api/salary/user_salary'}
        ></AutoTable>
      </Card>

      <Drawer
        visible={iftype.visible}
        title={iftype.title}
        placement={'top'}
        closable
        onClose={() => {
          ciftype({
            ...iftype,
            visible: false,
          });
        }}
        height="100%"
      >
        <AutoTable {...tableprops} withCard={false} pagination="false"></AutoTable>
      </Drawer>
    </div>
  );
}

export default connect(({ business, loading }) => ({
  business,
  loading,
}))(UserSalary);
